<template>
  <div>

   <el-card  v-for="item in items"  >
     <template #header >
       <div class="card-header" @click="change(item.classnum)">
         <span>{{item.medicine_chinese}}</span>
         <el-button class="button" text  >
           {{ item.expand ? '收缩' : '展开' }}
         </el-button>
       </div>
     </template>
     <el-descriptions :column="7" border :class="item.expand ? '' : 'hide'">
       <el-descriptions-item label="图片" label-align="right" align="center"> <img :src="item.picture" alt="" style="width: 100px;height: 100px;"</el-descriptions-item>
       <el-descriptions-item label="拼音" label-align="right" align="center"> {{item.medicine_name}}</el-descriptions-item>
       <el-descriptions-item label="名称" label-align="right" align="center"> {{item.medicine_chinese}}</el-descriptions-item>
       <el-descriptions-item label="纲分类" label-align="right" align="center"> {{item.famliy}}</el-descriptions-item>
       <el-descriptions-item label="纲分类" label-align="right" align="center"> {{item.class1}}</el-descriptions-item>
       <el-descriptions-item label="目分类" label-align="right" align="center"> {{item.class2}}</el-descriptions-item>
       <el-descriptions-item label="用法用量" label-align="right" align="center"> {{item.use}}</el-descriptions-item>
       <el-descriptions-item label="性味归经" label-align="right" align="center"> {{item.xingwei}}</el-descriptions-item>
       <el-descriptions-item label="中药功效" label-align="right" align="center"> {{item.effect}}</el-descriptions-item>
       <el-descriptions-item label="所属类" label-align="right" align="center"> {{item.category}}</el-descriptions-item>
       <el-descriptions-item label="记载书目" label-align="right" align="center"> {{item.book}}</el-descriptions-item>
       <el-descriptions-item label="注意事项" label-align="right" align="center"> {{item.attention}}</el-descriptions-item>
       <el-descriptions-item label="中药简介" label-align="right" align="center"> {{item.introduction}}</el-descriptions-item>
     </el-descriptions>
   </el-card>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router';
import {ref, onMounted, watch} from 'vue'
import {getClassItemInfoApi} from "@/apis/news.js";
// 在组件内部或者setup函数中使用
const route = useRoute();
const items = ref([])
const getClassItemInfoFun = (classItem) => {
  getClassItemInfoApi(classItem).then(res => {
    items.value = res.data
    items.value.forEach(item=>{
      item.expand=false
    })
    if ( items.value[0]){
      items.value[0].expand=true
    }
  })
}

//  改变card状态
const change = (data) => {
  console.log(data)
  items.value.forEach(item => {

    if (item.classnum == data) {
      item.expand = !item.expand
    }else {
      item.expand=false
    }
  })
}
onMounted(() => {
  watch(
      () => route,
      (newVal, oldVal) => {
        const url = route.path;
        let data=JSON.parse(localStorage.getItem("sider"));
        const parts = url.split("/");
        let index1 = parts[2];
        let index2 = parts[3];
        
        getClassItemInfoFun(data[index1].children[index2].menuName)

      },
      { immediate: true, deep: true }
  );
});


</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hide {
  display: none;
}
</style>
